<!--
 * @Author: quit
 * @Date: 2021-11-17 09:29:35
 * @LastEditTime: 2021-12-29 16:16:33
 * @Descripttion: 项目回收
-->
<template>
    <div id="ProjectRecycling-content">
        <div class="app-container">
            <el-card>
                <el-row class="row1">
                    <el-divider content-position="left">{{ $t('divider.divider1') }}</el-divider>
                    <div class="search">
                        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                            <el-form-item :label="'阈值名称'">
                                <el-input v-model="searchForm.appname" :placeholder="$t('input.searchPlaceholder')" />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" icon="el-icon-zoom-in" @click="getAppLists">{{ $t('button.search') }}</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-row>
                <el-row>
                    <el-button type="success" size="mini" icon="el-icon-sort" @click="restorationItmes">{{ '批量恢复' }}</el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteItmes">{{ $t('button.batchRemove') }}</el-button>
                </el-row>
                <el-row>
                    <el-table ref="tabel" v-loading="isLoading" :data="tableData" :empty-text="$t('table.emptyText')" style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" min-width="40" fixed="left" />
                        <el-table-column prop="appid" label="ID" min-width="45" fixed="left" />
                        <el-table-column prop="appname" :label="$t('table.appName')" min-width="120" fixed="left" />
                        <el-table-column prop="applongitude" :label="$t('table.longitude')" min-width="100" />
                        <el-table-column prop="applatitude" :label="$t('table.latitude')" min-width="100" />
                        <el-table-column prop="appprovince" :label="$t('table.province')" min-width="80" />
                        <el-table-column prop="appcity" :label="$t('table.city')" min-width="70" />
                        <el-table-column prop="apparea" :label="$t('table.area')" min-width="70" />
                        <el-table-column prop="appjzarea" :label="$t('table.acreage')" min-width="80" />
                        <el-table-column prop="applogotype" :label="$t('table.logoType')" min-width="90" />
                        <el-table-column prop="apptype" :label="$t('table.projectType')" min-width="100" />
                        <el-table-column prop="appserverip" :label="$t('table.serverId')" min-width="100" />
                        <el-table-column prop="appserverport" :label="$t('table.portId')" min-width="80" />
                        <el-table-column prop="appserveruser" :label="$t('table.username')" min-width="120" />
                        <el-table-column prop="appserverpass" :label="$t('table.password')" min-width="120" />
                        <el-table-column header-align="center" align="center" fixed="right" :label="$t('table.operable')" min-width="290">
                            <template slot-scope="scope">
                                <el-button type="success" size="mini" @click="restorationItme(scope.row.appid)">{{ '撤回删除' }}</el-button>
                                <el-button type="danger" size="mini" @click="deletaItme(scope.row.appid)">{{ $t('button.delete') }}</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        :current-page="pages.page"
                        :page-sizes="[1, 5, 10]"
                        :page-size="pages.size"
                        layout="prev, pager, next, jumper,total, sizes"
                        :total="pages.total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
                </el-row>
            </el-card>
        </div>
    </div>
</template>

<script>
import { getAppList, deteleitems, deleteItem, appDeleteItmes, appDeleteItme } from '@/api/BmRequest'

export default {
    components: {},
    data() {
        return {
            searchForm: {
                appname: ''
            },
            isLoading: false,
            tableData: [],
            pages: { page: 1, size: 10, total: 0 },
            checkedArr: []
        }
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    created() {
        this.getAppLists()
    }, // 生命周期 - 创建完成（可以访问当前this实例）
    mounted() {}, // 生命周期 - 挂载完成（可以访问DOM元素）
    beforeCreate() {}, // 生命周期 - 创建之前
    beforeMount() {}, // 生命周期 - 挂载之前
    beforeUpdate() {}, // 生命周期 - 更新之前
    updated() {}, // 生命周期 - 更新之后
    beforeDestroy() {}, // 生命周期 - 销毁之前
    destroyed() {}, // 生命周期 - 销毁完成
    activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
    // 方法集合
    methods: {
        /* 获取列表数据 */
        async getAppLists() {
            this.isLoading = true
            const obj = {
                appmanager: {
                    appname: this.searchForm.appname,
                    appisdelete: 1
                },
                pages: {
                    page: this.pages.page,
                    size: this.pages.size
                }
            }
            try {
                const { data } = await getAppList(obj)
                this.tableData = data.records
                this.pages.page = data.current
                this.pages.size = data.size
                this.pages.total = data.total
            } catch (error) {
                console.log(error)
            } finally {
                this.isLoading = false
            }
        },

        /* 分页组件事件 */
        // 页面显示条数
        handleSizeChange(newSize) {
            this.pages.size = newSize
            this.getAppLists()
        },
        // 当前显示页面
        handleCurrentChange(newPage) {
            this.pages.page = newPage
            this.getAppLists()
        },

        /* 表格多选事件 */
        handleSelectionChange(val) {
            const arr = []
            val.forEach((item, i) => {
                arr.push(item.appid)
            })
            this.checkedArr = arr
        },

        /* 批量恢复 */
        async restorationItmes() {
            if (this.checkedArr.length > 0) {
                this.$confirm('此操作将恢复所选项目, 是否继续?', '确认操作', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'success'
                })
                    .then(async () => {
                        await appDeleteItmes(this.checkedArr)
                        if (this.checkedArr.length === this.tableData.length) {
                            if (this.pages.page > 1) {
                                this.pages.page--
                            } else {
                                this.pages.page = 1
                            }
                        }
                        await this.getAppLists()
                        this.$message.success('当前操作成功')
                    })
                    .catch(error => {
                        console.log(error)
                        this.$refs.tabel.clearSelection()
                    })
            } else {
                this.$message.warning('请选择需要删除的项目')
            }
        },

        /* 批量删除 */
        async deleteItmes() {
            if (this.checkedArr.length > 0) {
                this.$confirm('此操作将删除所选项目, 是否继续?', '确认操作', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(async () => {
                        const { message } = await deteleitems(this.checkedArr)
                        if (this.checkedArr.length === this.tableData.length) {
                            if (this.pages.page > 1) {
                                this.pages.page--
                            } else {
                                this.pages.page = 1
                            }
                        }
                        await this.getAppLists()
                        this.$message.success({ message })
                    })
                    .catch(error => {
                        console.log(error)
                        this.$refs.tabel.clearSelection()
                    })
            } else {
                this.$message.warning('请选择需要删除的项目')
            }
        },

        /* table-item操作 */
        // 恢复
        async restorationItme(data) {
            try {
                await this.$confirm('此操作将恢复当前项目, 是否继续?', '确认操作', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'success'
                })
                await appDeleteItme(data)
                if (this.tableData.length === 1) {
                    if (this.pages.page > 1) {
                        this.pages.page--
                    } else {
                        this.pages.page = 1
                    }
                }
                await this.getAppLists()
                this.$message.success('当前操作成功')
            } catch (error) {
                console.log(error)
            }
        },
        // 删除
        async deletaItme(data) {
            try {
                await this.$confirm('此操作将永久删除当前项目, 是否继续?', '确认操作', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                const { message } = await deleteItem(data)
                if (this.tableData.length === 1) {
                    if (this.pages.page > 1) {
                        this.pages.page--
                    } else {
                        this.pages.page = 1
                    }
                }
                await this.getAppLists()
                this.$message.success(message)
            } catch (error) {
                console.log(error)
            }
        }
    }
}
</script>

<style scoped>
.el-table {
    margin-top: 10px;
}
.el-form {
    margin-left: 20px;
}
.el-input {
    width: 300px;
}
</style>

<style lang="scss" scoped>
.row1 {
    margin-bottom: 10px;
    .search {
        border: 1px solid #dcdfe6;
        border-top: none;
        padding: 34px 10px 10px 10px;
        margin-top: -14px;
    }
}
</style>
